import React from "react";
import Menu from "../component/Menu";
import Siderbar from "../component/Siderbar";
import { ConfigProvider, Layout } from "antd";
import { Outlet } from "react-router-dom";

const { Header, Sider, Content } = Layout;

const layoutStyle: React.CSSProperties = {
  height: "100%",
};

const contentStyle: React.CSSProperties = {
  backgroundColor: "#000",
};

const headerStyle: React.CSSProperties = {
  backgroundColor: "#000",
  borderBottom: "1px solid #ccc",
};

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorBgContainer: "#000",
          colorText: "#fff",
        },
        components: {
          Table: {
            headerBorderRadius: 0,
            rowHoverBg: "transparent",
            headerColor: "#fff",
            headerBg: "#000",
            rowExpandedBg: "#000",
          },
          Input: {
            activeBorderColor: "#ccc",
            hoverBorderColor: "#ccc",
            activeShadow: "none",
          },
        },
      }}
    >
      <Layout style={layoutStyle}>
        <Header style={headerStyle}>
          <Menu items={undefined} />
        </Header>
        <Layout hasSider>
          <Sider>
            <Siderbar />
          </Sider>
          <Content style={contentStyle}>
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
}

export default App;
